<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script src="lib/axios/dist/axios.min.js"></script>
     <script src="js/vue3.js"></script>
     <!--
         element-plus ui组件(饿了么 ui组件)
         -->
     <link rel="stylesheet" href="js/index.css">
     <script src="js/index.full.js"></script>
     <script src="js/index.iife.min.js"></script>
     <script src="js/zh-cn.js"></script>
</head>

<body>
     <div id="app">
          <el-button type="primary" @click="showAddDialog = !showAddDialog">增加</el-button>
          <el-button type="primary" @click="delSel()">删除选中</el-button>
          <el-table ref="multSel" :data="tableData">
               <el-table-column width="50" fixed="left" type="selection"></el-table-column>
               <el-table-column width="60" label="ID" prop="id"></el-table-column>
               <el-table-column width="150" label="账号" prop="mobile"></el-table-column>
               <el-table-column width="200" label="注册时间" prop="reg_time"></el-table-column>
               <el-table-column width="200" label="操作">
                    <template #default="scope">
                         <el-button type="danger" size="small" @click="del(scope.row.id)" icon="Delete"
                              circle></el-button>
                    </template>
               </el-table-column>
          </el-table>
          <el-pagination :total="total" background layout="total,prev,pager,next,jumper" :page-size=" limit"
               :current-page.sync="page" @current-change="jump">

          </el-pagination>
          <el-dialog v-model="showAddDialog" title="增加用户" style="width: 400px;">
               <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="ruleForm" status-icon>
                    <el-form-item prop="mobile">
                         <el-input v-model="ruleForm.mobile" style="width: 200px;" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="pwd">
                         <el-input v-model="ruleForm.pwd" type="password" style="width: 200px;"
                              placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                         <el-button type="primary" class="login_btn" @click="add">增加</el-button>
                    </el-form-item>
               </el-form>
          </el-dialog>
     </div>
     <script>
          const app = {
               data() {
                    return {
                         tableData: null,  //表格的数据
                         total: 0, //总记录数
                         page: 1,
                         limit: 6,
                         showAddDialog: false,
                         ruleForm: {
                              mobile: 'admin5',
                              pwd: '123456'
                         },
                         rules: {
                              mobile: {
                                   required: true,
                                   message: '请输入用户名',
                                   trigger: 'blur'
                              },
                              pwd: {
                                   required: true,
                                   message: '请输入密码',
                                   trigger: 'blur'
                              },
                         }

                    }
               },
               methods: {
                    delSel() {
                         const self = this;
                         const sels = this.$refs.multSel.getSelectionRows();
                         const uids = sels.map(obj => obj.id);
                         axios.post("http://localhost:88/delMultUsers", uids).
                              then(res => {
                                   if (res.data == 0) {
                                        location.reload();
                                   }
                                   else if (res.data == 1) {
                                        self.$message({
                                             message: '删除失败',
                                             duration: 100000
                                        })
                                   }

                              })
                    },
                    del(id) {
                         axios.get("http://localhost:88/delUser?id=" + id).
                              then(res => {
                                   if (res.data == 0) {
                                        location.reload();
                                   }
                                   else if (res.data == 1) {
                                        self.$message({
                                             message: '删除失败',
                                             duration: 100000
                                        })
                                   }

                              })
                    },
                    initData() {
                         const self = this;
                         axios.get(" http://localhost:88/users?page=" + this.page + " &limit=" + this.limit)
                              .then(res => {
                                   self.tableData = res.data.list;   //用户集合的数据
                                   self.total = res.data.total;      //总记录数
                              })
                    },
                    jump(val) {//val表示要跳转的页码
                         this.page = val;
                         this.initData();//重新请求数据

                    },
                    add() {
                         const self = this;
                         axios.post("http://localhost:88/doReg", this.ruleForm)
                              .then(res => {
                                   if (res.data == 0) {
                                        location.reload();
                                   }
                                   else if (res.data == 1) {
                                        self.$message({
                                             message: '账号已存在',
                                             duration: 100000
                                        })
                                   }
                              })
                    }

               },
               mounted() {
                    this.initData();
               }
          }
          const vueApp = Vue.createApp(app); //创建vue的对象实例对象
          vueApp.use(ElementPlus, { locale: ElementPlusLocaleZhCn }); //引用elementplus,组件
          //加载icons 图标图形组件
          for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
               vueApp.component(key, component);
          }
          vueApp.mount(" #app");//挂载到某个html标签 </script>
</body>

</html>